<!--{template common/container/pc/header_start}-->
<link rel="stylesheet" href="static/scss/default/index.css?{VERHASH}">
<link rel="stylesheet" href="dzz/banner/template/fashion/pc/assets/css/index.css?{VERHASH}">
<script type="text/javascript" src="dzz/banner/template/fashion/pc/assets/js/menu.js?{VERHASH}"></script>
<script type="text/javascript" src="static/vue_components/TabMessage/index.js?{VERHASH}"></script>
<link rel="stylesheet" media="noexist" onload="this.media='all'" href="static/vue_components/TabMessage/index.css?{VERHASH}">
<style>
	.ucenter-header{
		border: 0;
		width: 100%;
	}
	.el-collapse{
		--el-collapse-header-height: 44px;
    	--el-collapse-header-font-size: var(--el-font-size-base);
		margin-top: 20px;
	}
	.el-collapse .el-collapse-item__header {
		font-weight: 500;
		padding: 10px 16px;
    	padding-right: 0;
		text-decoration: none;
		font-size: var(--el-font-size-medium);
	}
	.el-collapse .el-collapse-item:last-child .el-collapse-item__header{
		border: 0;
	}
	.ucenter-header .Topcarousel{
		width: 50px;
		height: 50px;
		font-size: 14px;
		text-align: center;
		line-height: 50px;
	}
	.img-circle{
		width: 100%;
		height: 100%;
	}
	.m-header-munu .el-drawer__body{
		padding: 0;
	}
</style>
<!--{template common/container/pc/header_end}-->
<div id="dzzoffice">
	<el-container class="page-main">
		<el-header class="page-header" height="auto" style="border: 0px;padding: 0;">
			<!--{template common/container/mobile/ucenter_header}-->
		</el-header>
		<el-main style="--el-main-padding:10px;padding-top: 0;">
			<div class="el-collapse">
				<div class="el-collapse-item" v-for="(item,index) in UcenterNavigations">
					<a class="el-collapse-item__header" :href="item.url"  :target="item.id=='collection'?'_blank':''">
						{{item.name}}
						<div class="el-collapse-item__arrow">
							{{item.number}}
							<el-icon><Arrow-Right /></el-icon>
						</div>
					</a>
				</div>
			</div>
			<el-button style="margin-top: 20px;width: 100%;font-size:var(--el-font-size-medium);" size="large" @click="OutLogin">退出登录</el-button>
		</el-main>
		<el-header class="page-header page-footer_m"  height="50px" style="border:0;border-top: var(--el-border);">
			<a class="tabbar-item" href="{$_G['siteurl']}">
				<div class="tabbar-item__icon">
					<el-icon size="24">
						<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 48 48">
							<path stroke-linejoin="round" stroke-linecap="square" stroke-width="2" stroke="currentColor" d="M9 18v24h30V18L24 6 9 18Z" data-follow-stroke="currentColor"/>
							<path stroke-linejoin="round" stroke-width="2" stroke="currentColor" d="M19 29v13h10V29H19Z" data-follow-stroke="currentColor"/>
							<path stroke-linecap="square" stroke-width="2" stroke="currentColor" d="M9 42h30" data-follow-stroke="currentColor"/>
						</svg>
					</el-icon>
					
				</div>
				<div class="tabbar-item__text">
					<el-text size="small">首页</el-text>
				</div>
			</a>
			
			
			<a class="tabbar-item" href="index.php?mod=collection&op=view" target="_blank">
				<div class="tabbar-item__icon">
					<el-icon size="24">
						<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 48 48">
							<path stroke-linejoin="round" stroke-width="2" stroke="currentColor" d="m23.999 5-6.113 12.478L4 19.49l10.059 9.834L11.654 43 24 36.42 36.345 43 33.96 29.325 44 19.491l-13.809-2.013L24 5Z" data-follow-stroke="currentColor"/></svg>
					</el-icon>
					
				</div>
				<div class="tabbar-item__text">
					<el-text size="small">收藏夹</el-text>
				</div>
			</a>
			<div class="tabbar-item" v-if="(tabarr && tabarr.length) || (collectlisarr && collectlisarr.length)">
				<div style="display: flex;align-items: center;justify-content: center;flex-direction: column;" @click="headerCollect.visble = true">
					<div class="tabbar-item__icon">
						<el-icon size="24">
							<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 48 48">
								<rect stroke-linejoin="round" stroke-width="2" stroke="currentColor" rx="3" height="36" width="36" y="6" x="6" data-follow-stroke="currentColor"/>
								<path stroke-linejoin="round" stroke-linecap="square" stroke-width="2" stroke="currentColor" d="M24 16v16M16 24h16" data-follow-stroke="currentColor"/>
							</svg>
						</el-icon>
						
					</div>
					<div class="tabbar-item__text">
						<el-text size="small">归档文件</el-text>
					</div>
				</div>
			</div>
			<a class="tabbar-item active" href="user.php?mod=my">
				<div class="tabbar-item__icon">
					<el-icon size="24">
						<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 48 48">
							<path stroke-linejoin="round" stroke-linecap="square" stroke-width="2" stroke="currentColor" d="M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20Z" clip-rule="evenodd" data-follow-stroke="currentColor"/>
							<path stroke-linejoin="round" stroke-width="2" stroke="currentColor" d="M24 23a5 5 0 1 0 0-10 5 5 0 0 0 0 10Z" data-follow-stroke="currentColor"/>
							<path stroke-linejoin="round" stroke-linecap="square" stroke-width="2" stroke="currentColor" d="M10.022 38.332C10.366 33.121 14.702 29 20 29h8c5.291 0 9.623 4.11 9.977 9.311" data-follow-stroke="currentColor"/>
						</svg>
					</el-icon>
					
				</div>
				<div class="tabbar-item__text">
					<el-text size="small">我的</el-text>
				</div>
			</a>
			
			
			<el-drawer
				v-model="headerTabmessage.visible"
				direction="btt"
				size="100%"
				title="{lang Edit_information_cover}"
				custom-class="m-header-munu"
				@open="OpenHeaderMessage"
				style="padding: 0;">
				<el-container>
					<el-main>
						<tab_message 
							ref="tabheadermessage"
							:allsubmit="true"
							icotype="1"
							formhash="{FORMHASH}"
							:create="true"
							:ispc="false"
							:gid="headerTabmessage.gid"></tab_message>
					</el-main>
					<el-footer style="height: 46px;line-height: 45px;border-top: var(--el-border);display: flex;align-items: center;">
						<el-button style="flex: 0 50%;" @click="headerTabmessage.visible=false">{lang close}</el-button>
						<el-button type="primary" @click="tabheadermessageSave" style="flex: 0 50%;">{lang confirms}</el-button>
					</el-footer>
				</el-container>
				
			  </el-drawer>
        </el-header>
	</el-container>
	<el-drawer
		v-model="headerCollect.visble"
		direction="btt"
		size="85%"
		title="归档文件"
		custom-class="m-header-munu">
		<ul class="el-dropdown-menu">
			<template v-for="(item,key) in tabarr">
				<li class="el-dropdown-menu__item" style="height: 2.5rem;" @click="handleCollectCommand(item)">{{item.name}}</li>
			</template>
			<li class="el-dropdown-menu__item--divided" v-if="collectlisarr.length"></li>
			<template v-for="(item,key) in collectlisarr">
				<li class="el-dropdown-menu__item" style="height: 2.5rem;" @click="handleCollectCommand(item)">{{item.name}}</li>
			</template>
		</ul>
	</el-drawer>


	
</div>

<script type="text/javascript">
	const { createApp, reactive, toRefs, toRef, ref, onMounted, nextTick, watch } = Vue;
	const dzzoffice = createApp({
		data() {
			var self = this;
			return {
				DocumentThemeColor:'light',
				headerdrawer_m:false,
				bannerData:{
					data:[],
					active:'',
				},
				collectlisarr:[],
				tabarr:$tabarr,
				headerTabmessage:{
					gid:0,
					visible:false
				},
				headerCollect:{
                    visble:false,
                },
			}
		},
		mixins:[UcenterHeader],
		watch:{
			DocumentThemeColor:{
				handler(newval){
					document.querySelector('html').className = newval
				},
				deep:true,
				// immediate:true
			}
		},
		created() {
			 //主题颜色
			let theme = localStorage.getItem('theme');
			if(theme){
				this.DocumentThemeColor=theme;
			}else{
				this.DocumentThemeColor = 'light'
			}
			
			// let data = '$bannerdata';
			// if(!data){
			// 	return false;
			// }
			// this.bannerData.data = JSON.parse(data);
		},
		methods: {
			DocumentThemeChange(){
				if(this.DocumentThemeColor=='light'){
					this.DocumentThemeColor='dark';
					localStorage.setItem('theme','dark');
				}else{
					this.DocumentThemeColor='light';
					localStorage.setItem('theme','light');
				}
			},
			handleSelect(data){
				if(data.url){
					window.location.href = data.url;
				}else{
					window.location.href = data.realurl;
				}

			},
			OutLogin(){
				let self = this;
				self.$messageBox.confirm('您确定要注销登录?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(async function() {
					let {data: res} = await axios.post('user.php?mod=login&op=logging&inajax=1&action=logout&formhash={FORMHASH}&t='+new Date().getTime());
					if(res.success){
						window.location.href = '$_G[siteurl]'
					}else{
						self.$message.error(res.msg || '退出登录失败')
					}
				}).catch(function() {
							
				});
			},
			handleCollectCommand(data){
				let self = this;
				if(data.type == 'tab'){
					this.headerTabmessage.gid = data.value;
					this.headerTabmessage.visible = true;
				}else{
					window.open(data.value);
				}
			},
			CollectCommand(type,key){
				return {type,key}
			},
			tabheadermessageSave(val){
                let self = this;
                self.$refs.tabheadermessage.SaveAllData();
            },
			OpenHeaderMessage(type,key){
				let self = this;
                self.$refs.tabheadermessage.CreateData();
			},
			
		},
		mounted() {

		},
		components:{
			menuitem
		}
	});
	dzzoffice.use(ElementPlus, {
		locale: {$_G['language_list'][$_G['language']]['elementflagCamel']},
	});
	for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
		dzzoffice.component(key, component)
	}
	dzzoffice.component('comavatar', comavatar);
	dzzoffice.component('tab_message', tab_message);
	// 屏蔽警告信息
	dzzoffice.config.warnHandler = function(){return null};
	dzzoffice.mount('#dzzoffice');
</script>

<!--{template common/container/pc/footer}-->
